<template>
  <div id="parameter">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:config:add'"
        type="warning"
        icon="el-icon-plus"
        @click="addRoles('add')"
      >
        新增
      </el-button>
      <el-button
        v-permission="'wh:system:config:remove'"
        type="warning"
        plain
        @click="delRoles"
      >
        批量删除
      </el-button>
      <el-button
        v-permission="'wh:system:config:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        label="参数名称"
        prop="configName"
        min-width="150"
      ></el-table-column>
      <el-table-column
        label="参数键值"
        prop="configValue"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="备注"
        show-overflow-tooltip
        prop="remark"
        min-width="100"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:config:edit'"
            type="text"
            @click="editRoles(scope.row.configId)"
          >
            编辑
          </el-button>
          <el-button
            v-permission="'wh:system:config:remove'"
            type="text"
            @click="handledelRoles(scope.row.configId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增弹窗 -->
    <dialogAdd
      v-if="dialogAddData.isShow"
      :dialog-add-data="dialogAddData"
      @refresh="refresh"
    ></dialogAdd>
    <!-- 编辑弹窗 -->
    <dialogEdit
      v-if="dailogData.isShow"
      :dailog-data="dailogData"
      @refresh="refresh"
    ></dialogEdit>
  </div>
</template>

<script>
import { getSearchList, batchRemove, deleteReq } from '@/api/system/parameter' // 接口
import topSearch from '@component/system/parameter/topSearch' // 上部搜索条件
import dialogEdit from '@component/system/parameter/dialogEdit' // 新增弹窗
import dialogAdd from '@component/system/parameter/dialogAdd' // 编辑弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'setparam',
  msg: '参数设置',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAdd,
    dialogEdit
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        configName: ''
      },
      // 新增
      dialogAddData: {
        isShow: false, // 默认隐藏
        type: '', // 默认新增
        params: '' // 新增时，传递的参数
      },
      dailogData: {
        isShow: false, // 默认隐藏
        type: '', // 默认编辑
        params: null // 编辑时，传递的参数
      },
      multipleSelection: [] // 行
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 新增
    addRoles(params = '') {
      this.dialogAddData.isShow = true
      this.dialogAddData.params = params
    },
    // 编辑
    editRoles(configId) {
      this.dailogData.isShow = true
      this.dailogData.params = configId
    },

    /* 导出 */
    exportRoles() {
      this.$confirm('确定导出所有参数吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/system/parameters/export'
        let params = Object.assign({}, this.searchParams, this.formInline)
        delete params.createTime
        delete params.startTime
        delete params.endTime
        this.downFile('get', url, params, '参数管理')
      })
    },
    /* 批量删除 */
    delRoles() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除选中的这${this.multipleSelection.length}条数据吗？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.configId)
        })
        let obj = { ids: ids.join(',') }
        batchRemove(
          obj,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    /* 单个删除 */
    handledelRoles(id) {
      this.$confirm('确认删除这条信息吗吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteReq(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.deldisabled = false
      this.editdisabled = true
      if (this.multipleSelection.length === 1) {
        this.editdisabled = false
      }
      if (this.multipleSelection.length === 0) {
        this.deldisabled = true
        this.editdisabled = true
      }
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less"></style>
